<!-- 帖子展示 -->
<template>
  <div>
    <main class="bg-grey pb-30" v-loading="blogOp">

      <div v-if="module == 'default'">
        <div class="container single-content">
          <div class="entry-header entry-header-style-1 mb-50 pt-50">
            <h1 class="entry-title mb-50 font-weight-900">
              {{document.title}}
            </h1>
            <div class="row">
              <div class="col-md-6">
                <div class="entry-meta align-items-center meta-2 font-small color-muted">
                  <p class="mb-5">
                    <a href="javascript:void(0)" class="author-avatar" @click="$commons.toWindodAuthor(document.userid)"
                      style="white-space:nowrap;">
                      <img class="img-circle" :src="user.avater" alt="">
                    </a>
                    @ <a href="javascript:void(0)" @click="$commons.toWindodAuthor(document.userid)"
                      style="white-space:nowrap;">
                      <span class="author-name font-weight-bold text-black">{{user.nickname}}&nbsp;</span>
                    </a>
                  </p>
                  <span class="mr-10"> {{document.updatetime}} 更新</span>
                  <span class="has-dot mr-10"> {{pretime}} 分钟阅读</span>
                  <span class="has-dot"> {{$commons.formatNumber(document.views)}}次浏览</span>
                </div>
              </div>
              <div class="col-md-6 text-right d-none d-md-inline">
                <ul class="header-social-network d-inline-block list-inline mr-15">
                  <li class="list-inline-item text-muted"><span>博客禁止转载</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <figure class="image mb-30 m-auto text-center border-radius-10">
          <img class="border-radius-10" :src="document.background" width="760px;" alt="post-title" />
        </figure>
      </div>

      <div v-if="module == 'big'">
        <div class="entry-header entry-header-style-2 pb-80 pt-80 mb-50 text-white"
          :style="{ backgroundImage: 'url(' + document.background + ')' }">
          <div class="container entry-header-content">
            <h1 class="entry-title mb-50 font-weight-900">
              {{document.title}}
            </h1>
            <div class="entry-meta align-items-center meta-2 font-small color-white">
              <!-- <p class="mb-5 text-white"> -->
              <a href="javascript:void(0)" class="author-avatar" @click="$commons.toWindodAuthor(document.userid)"
                style="white-space:nowrap;">
                <img class="img-circle" :src="user.avater" alt="">
              </a>
              <a href="javascript:void(0)" @click="$commons.toWindodAuthor(document.userid)"
                style="white-space:nowrap;">
                <span class="author-name font-weight-bold text-white">作者：{{user.nickname}}&nbsp;</span>
              </a>
              <span class="has-dot mr-10 text-white"> {{document.updatetime}} 更新</span>
              <span class="has-dot mr-10 text-white"> {{pretime}} 分钟阅读</span>
              <span class="has-dot text-white"> {{$commons.formatNumber(document.views)}}次浏览</span>
              <!-- </p> -->
            </div>

          </div>

        </div>
      </div>

      <div v-if="module == 'left'">
        <div class="container single-content">
          <div class="entry-header pt-80 pb-30 mb-20">
            <div class="row">
              <div class="col-md-6 mb-md-0 mb-sm-3">
                <figure class="mb-0 mt-lg-0 mt-3 border-radius-5">
                  <img class=" border-radius-5" height="250px;" :src="document.background" alt="">
                </figure>
              </div>
              <div class="col-md-6 align-self-center">
                <div class="post-content">
                  <div class="entry-meta meta-0 mb-15 font-small">
                    <a :href="item.path" v-for="(item,i) in document.classify" :key="i" style="float:left;">
                      <span :class="'post-cat'+' '+ txtc[i%txtc.length]">{{item.name}}</span>
                    </a>
                  </div>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <h1 class="entry-title mb-30 font-weight-900" style="float:left;">
                        {{document.title}}
                      </h1>
                    </el-col>
                    <el-col :span="24">
                      <p class="excerpt mb-30">
                        {{document.slogan}}
                      </p>
                    </el-col>

                  </el-row>



                  <div class="entry-meta align-items-center meta-2 font-small color-muted">
                    <p class="mb-5">
                      <a href="javascript:void(0)" @click="$commons.toWindodAuthor(document.userid)"
                        class="author-avatar" style="white-space:nowrap;">
                        <img class="img-circle" :src="user.avater" alt="">
                      </a>
                      <!-- <a class="author-avatar" :href="document.userid"><img class="img-circle" :src="user.avater"
                          alt=""></a> -->
                      @
                      <a href="javascript:void(0)" @click="$commons.toWindodAuthor(document.userid)"
                        style="white-space:nowrap;">
                        <span class="author-name font-weight-bold text-black">{{user.nickname}}&nbsp;</span>
                      </a>

                    </p>
                    <span class="mr-10"> {{document.updatetime}} 更新</span>
                    <span class="has-dot mr-10"> {{pretime}} 分钟阅读</span>
                    <span class="has-dot"> {{$commons.formatNumber(document.views)}}次浏览</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="entry-wraper mb-50">
        <div v-highlightjs>
        </div>
        <div class="ql-editor noy" style="" v-html="document.context" v-hljs></div>
      </div>
      <!-- 文章底部 -->
      <div class="container">
        <div class="entry-bottom mt-50 mb-30 wow fadeIn animated">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="tags">
                <span>标签: </span>

                <a href="javascript:void(0)" @click="$commons.toSearch(item)" rel="tag" v-for="(item,i) of buttom.tags"
                  :key="i">{{item}}</a>

              </div>
            </el-col>
            <el-col :span="12">
              <span class="hit-count mr-15 float-right">
                <offence v-if="document.id != null" :user="user" :content="document.title" :target="document.id" type="文章"></offence>
              </span>

              <span class="hit-count mr-15 float-right"><i
                  class="elegant-icon icon_comment_alt mr-5"></i>{{$commons.formatNumber(buttom.comments)}} 条评论</span>
            </el-col>
          </el-row>

        </div>
        <!-- <div class="single-social-share clearfix wow fadeIn animated">
          <div class="entry-meta meta-1 font-small color-grey float-left mt-10">
            <span class="hit-count mr-15"><i class="elegant-icon icon_comment_alt mr-5"></i>182 comments</span>
            <span class="hit-count mr-15"><i class="elegant-icon icon_like mr-5"></i>268 likes</span>
            <span class="hit-count"><i class="elegant-icon icon_star-half_alt mr-5"></i>Rate: 9/10</span>
          </div>
        </div> -->
        <!--More posts-->
        <div
          :class="like&&isLike?'single-more-articles border-radius-5 single-more-articles--visible':'single-more-articles border-radius-5'">
          <div class="widget-header-2 position-relative mb-30">
            <h5 class="mt-5 mb-30">
              猜你喜欢
              &nbsp;
              <el-link :disabled="rec.length == 0" icon="el-icon-refresh" @click="recommend()">
              </el-link>
            </h5>
            <button class="single-more-articles-close" @click="isLike = false"><i
                class="elegant-icon icon_close"></i></button>
          </div>
          <span v-if="rec.length == 0">😔目前还没有发现相关的文章，博主们正在火速创作~</span>
          <div class="post-block-list post-module-1 post-module-5" v-loading="searchLike">
            <ul class="list-post">
              <li class="mb-30" v-for="(item,i) in rec" :key="i">
                <div class="d-flex hover-up-2 transition-normal">
                  <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                    <a a @click="$commons.toWindodBlog(item.id)" href="javascript:void(0)" class="color-white">
                      <img :src="item.background" alt="">
                    </a>
                  </div>
                  <div class="post-content media-body">
                    <h6 class="post-title mb-15 text-limit-2-row font-medium">
                      <a @click="$commons.toWindodBlog(item.id)" href="javascript:void(0)">
                        {{overflowHidForText(item.title,10)}}
                      </a>
                    </h6>
                    <p><a @click="$commons.toWindodBlog(item.id)" href="javascript:void(0)">
                        {{overflowHidForText(item.slogan,12)}}
                      </a>
                    </p>
                    <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                      <span class="post-on">{{$commons.dateStr(item.updatetime)}} 更新</span>
                      <span class="post-by has-dot">{{$commons.formatNumber(item.views)}}阅读</span>
                    </div>
                  </div>
                </div>
              </li>

            </ul>
          </div>
        </div>
        <!--Comments-->
        <ky-comments :id="document.id"></ky-comments>
      </div>

    </main>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  import KyComments from '@/components/module/ky-comments'
  import offence from './offence.vue'
  let Base64 = require('js-base64').Base64
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      KyComments,
      offence
    },
    props: ['id', 'module'],
    data() {
      //这里存放数据
      return {
        searchLike: false,
        like: false,
        isLike: true,
        blogOp: true,
        txtc: ['text-warning', 'text-danger', 'text-success', 'text-pink', 'text-primary', 'text-info',
          'text-secondary'
        ],
        pretime: 1,
        document: {},
        user: {},
        buttom: {},
        rec: [],
        isRec: false
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      overflowHidForText(val, max = 42) {
        let textLength = val.length;
        let resultText = '';
        if (textLength > max) {
          resultText = val.slice(0, max) + '...'
        } else {
          resultText = val
        }
        return resultText
      },
      recommend() {
        this.isRec = false;
        this.get2Doc();
      },
      async get2Doc() {
        if (this.isRec) {
          return;
        }
        this.searchLike = true;
        this.isRec = true;
        var t = '';
        for (const tag of this.buttom.tags) {
          t = t + tag;
        }
        const pram = {
          id: this.document.id,
          title: this.document.title,
          slogan: this.document.slogan,
          tag: t
        }
        var res = await this.$api.search.recommend(pram)
        if (res.code == 20000) {
          this.rec = res.data;
        }
        this.searchLike = false;
      },
      async getTagAndCommentCount() {
        const pram = {
          id: this.id
        }
        var res = await this.$api.core.getTagsAndCount(pram)
        if (res.code == 20000) {
          this.buttom = res.data;
        }
      },
      btn_pos: function () {
        //滚动条的高度
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var clientHeight = document.body.clientHeight;
        //滚动条的高度>可视区的高度
        if (scrollTop / clientHeight > 0.3) {
          this.get2Doc();
          if (this.rec.length == 0) {
            this.isLike = false;
          } else this.like = true
        } else {
          this.like = false;
        }
      },
      preTime(data) {
        var time = Math.round(data.replace(/<[^<>]+>/g, "").length / 400);
        return time > 1 ? time : 1;
      },
      async getUserInfo() {
        const pram = {
          userid: this.document.userid
        }
        var res = await this.$api.article.getUser(pram);
        if (res.code == 20000) {
          this.user = res.data;
        }
      },
      async getDetail() {
        this.blogOp = true;
        const pram = {
          id: this.id
        }
        var res = await this.$api.article.getBlog(pram);
        if (res.code == 20000) {
          this.document = res.data;
          if (this.document.id != null)
            await this.getUserInfo();
        }
        this.blogOp = false;
        this.document.context = this.decode(this.document.context);
        this.pretime = this.preTime(this.document.context);
        this.document.updatetime = this.$commons.dateStr(this.document.updatetime);
      },
      decode(val) {
        return Base64.decode(val)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    async mounted() {
      await this.getDetail();
      this.getTagAndCommentCount();
      window.addEventListener('scroll', this.btn_pos);
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>
  video::-webkit-media-controls-timeline {

    padding-left: 0px !important;

    padding-right: 0px !important;

  }

  pre code {
    max-height: 500px;
    overflow-x: none;
  }

  pre code span {
    white-space: nowrap;
    overflow: scroll;
  }

  .noy::-webkit-scrollbar {
    display: none;
    overflow: -Scroll;
    overflow-x: hidden
  }

  .video {
    width: 50%;
  }

</style>
